<template>
	<view>
			<!-- <view class="" style="margin: 0 20rpx;display: flex;align-items: center;justify-content: space-between;height: 80rpx;">
				<text>选择时间</text>
				<view class="" style="margin: 20rpx 0;">
					<date-time @time1Confirm="time1Confirm" @time2Confirm="time2Confirm" :alarm_stat_start="alarm_stat_start" :alarm_stat_end="alarm_stat_end" />
				</view>
			</view> -->
			<view style="padding:0 20rpx;display: flex;
		align-items: center;justify-content: space-between;background: #fff;border-bottom-left-radius: 20rpx;border-bottom-right-radius: 20rpx;margin-bottom: 20px;">
			<text>选择时间</text>
			<view >
				<!-- <date-time :date="setDate" /> -->
				<date-time @time1Confirm="time1Confirm" @time2Confirm="time2Confirm" :alarm_stat_start="alarm_stat_start" :alarm_stat_end="alarm_stat_end" />
			</view>
		</view>
		<!-- </view> -->
		
		<view class="" style="margin: 20rpx 20rpx;margin-bottom: 100rpx;">
			<view class="" style="margin-bottom: 20rpx;background:#fff;padding:20rpx;border-radius: 20rpx;" v-for="(item,index) in list" :key="item.id">
				<view class="" style="display: flex;margin-bottom: 20rpx;align-items: center;justify-content: space-between;">
					<text>{{item.createtime}}</text>
					<!-- <view class="" style="width: 45rpx;height: 45rpx;">
						<u-tag :text="item.type=='day'?'日':'月'" shape="circle" size="mini" type="warning"></u-tag>
					</view> -->
					<!-- <view>
						<img src="@/static/imgs/edit.png" style="width:24rpx;height:24rpx;" alt="" srcset="" />
						<text style="color: #0197FFFF;font-size: 24rpx;">编辑</text>
					</view> -->
					 
				</view>
				
				<text-show linesCount="2" :imgs="item.imgs" showinfotextColor="#546D8C" :content="item.content" />
			</view>
			
		</view>

	</view>
</template>

<script>
	import TextShow from '@/components/text-show/text-show.vue'
	import DateTime from '@/components/date-time/date-time.vue'
	export default {
		comments:{
			TextShow,
			DateTime
		},
		data() {
			return {
				// setCalShow:false,
				minDate:'',
				// setDate:[],
				mode: 'range',
				search:{
					page:1,
					page_size:20,
					type:'day,month',
					date1:'',
					date2:'',
				},
				list:[],
				isLoading:false,
				alarm_stat_start:'',
				alarm_stat_end:'',
				
				
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			time1Confirm(time){
				this.alarm_stat_start = time
				if(this.alarm_stat_start && this.alarm_stat_end){
					this.setCalClose();
				}
			},
			time2Confirm(time){
				this.alarm_stat_end = time
				if(this.alarm_stat_start && this.alarm_stat_end){
					this.setCalClose();
				}
			},
			setCalClose(){
				// this.setCalShow = false
				this.search.page = 1;
				this.list = []
				this.getList()
			},

			getList(){
				this.isLoading = true; // 开始加载数据时设置标志位 
				if(this.alarm_stat_start && this.alarm_stat_end){
					this.search.date1 = this.alarm_stat_start;
					this.search.date2 = this.alarm_stat_end;
				}
				
				this.$api.report.list(this.search).then(res => {
					if(res.code == 1){
						this.list = this.list.concat(res.data.data);
						if(res.data.data.length == 0){
							this.$u.toast('没有数据了');
						}else{
							this.search.page += 1
						}
						this.isLoading = false;
						
					}
					
				})
			},
			onReachBottom() {  
			      // 滚动到底部时触发，如果不在加载中，则继续加载数据  
				  if(!this.isLoading){
					  this.getList()
				  }
				  
			},  
		}
	}
</script>

<style scoped>
page{
	background-color: #f2f2f2;
}
</style>
